<template>
  <el-form :model="_form" inline>
    <el-form-item label prop="stationId">
      <select-form
        v-model="_form.stationId"
        placeholder="选择研究中心"
        :options="centerOptions"
        :default-props="{ label: 'name', value: 'oid' }"
        :multiple="false"
        @change="search"
      />
    </el-form-item>
    <el-form-item label class="search-input-item">
      <search-input v-model="_form.sic" @search="search" />
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { computed, defineEmits, defineProps, PropType } from 'vue'

import SearchInput from '@/components/CommonSearch/SearchInput/index.vue'
import SelectForm from '@/components/Form/Select.vue'

import IBaseObj from '#/index'

const props = defineProps({
  form: {
    type: Object as PropType<IBaseObj>,
    default: () => {},
  },
  centerOptions: {
    type: Array as PropType<IBaseObj[]>,
    default: () => [],
  },
})

const emits = defineEmits(['update:form', 'search'])

const _form: IBaseObj = computed({
  get() {
    return props.form
  },
  set(val) {
    emits('update:form', val)
  },
})

const search = () => {
  emits('search')
}
</script>

<style lang="scss" scoped>
.el-form {
  display: flex;
}

.width-auto {
  :deep() {
    .el-form-item__content {
      width: auto !important;
    }
  }
}
</style>
